<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import AlloyFinger from '@/utils/gesture/alloy_finger'
import Transform from '@/utils/gesture/transform'

const props = defineProps({
  srcList: {
    type: Array,
    default: () => []
  },
  showImgs: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  },
  isPhone: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:showImg', 'update:bigImgIndex'])
// const isPhones = ref(props.isPhone)

// 图片放大缩小
const bigImgUrl = ref('')
const showImg = ref(props.showImgs)
const isDown = ref(false)
const bigImageRef = ref(null)
const bigImgIndex = ref(props.index)
const imageScale = ref(1) // 缩放比
const dragStartX = ref(0) // 鼠标按下初始位置
const dragStartY = ref(0) // 鼠标按下初始位置
const imageX = ref(0) // x轴偏移
const imageY = ref(0) // y轴偏移
const rotate = ref(0) // 旋转
const cursorStyle = ref('grab')
// grab 小手  grabbing  拳头
const imageStyle = computed(() => ({
  transform: `translate(${imageX.value}px, ${imageY.value}px) scale(${imageScale.value}) rotate(${rotate.value}deg)`,
  cursor: cursorStyle.value
}))

const offBigImg = () => {
  showImg.value = false
  imageScale.value = 1
  dragStartX.value = 0
  dragStartY.value = 0
  imageX.value = 0
  imageY.value = 0
  rotate.value = 0
  emit('update:showImg', false)
}
const handleWheelZoom = (event) => {
  event.preventDefault()
  const direction = Math.sign(event.deltaY)
  blowUp(direction > 0 ? 'small' : 'big')
}
const startDrag = (event) => {
  if (event.button !== 0) return
  isDown.value = true
  cursorStyle.value = 'grabbing'
  dragStartX.value = event.clientX - imageX.value
  dragStartY.value = event.clientY - imageY.value
  event.stopPropagation()
}
const startMove = (event) => {
  if (!isDown.value) return
  const dx = event.clientX - dragStartX.value
  const dy = event.clientY - dragStartY.value
  imageX.value = dx
  imageY.value = dy
  event.stopPropagation()
}
const stopDrag = () => {
  isDown.value = false
  cursorStyle.value = 'grab'
}
const stopSeleave = () => {
  isDown.value = false
}
const rotateFun = (direction) => {
  rotate.value = (rotate.value + (direction === 'left' ? -90 : 90)) % 360
}
const blowUp = (size) => {
  let newScale = size === 'big' ? imageScale.value * 1.2 : imageScale.value / 1.2
  imageScale.value = Math.max(0.2, Math.min(newScale, 7))
}
const changeImg = (index) => {
  imageScale.value = 1
  imageX.value = 0
  imageY.value = 0
  dragStartX.value = 0
  dragStartY.value = 0
  rotate.value = 0
  index = Math.max(0, Math.min(index, props.srcList.length - 1))
  bigImgUrl.value = props.srcList[index]
  bigImgIndex.value = index
}

// 移动端图片
const moveFun = () => {
  const imgMove = document.querySelector('#imgMove')
  if (!imgMove) return
  Transform(imgMove)
  new AlloyFinger(imgMove, {
    multipointStart: () => {
      imageScale.value = imgMove.scaleX
    },
    pressMove: (evt) => {
      // console.log('移动：', evt)
      imgMove.translateX += evt.deltaX
      imgMove.translateY += evt.deltaY
      evt.preventDefault()
    },
    pinch: (evt) => {
      imgMove.scaleX = imgMove.scaleY = imageScale.value * evt.zoom
      evt.preventDefault()
    },
    doubleTap: (evt) => {
      console.log(evt)
    },
    tap: () => {
      console.log('evt')
      showImg.value = false
      emit('update:showImg', false)
    }
  })
}
watch([() => props.showImgs, () => props.index], ([oneNew, twoNew]) => {
  if (oneNew && props.isPhone) {
    nextTick(() => {
      moveFun()
    })
  }
  bigImgIndex.value = twoNew
})
</script>

<template>
  <template v-if="!props.isPhone">
    <div
      v-if="showImgs"
      class="bigImg"
      @mousewheel="handleWheelZoom"
      @mousedown="startDrag"
      @mouseup="stopDrag"
      @mouseleave="stopSeleave"
    >
      <img
        :style="imageStyle"
        v-for="(item, index) in srcList"
        :class="index === bigImgIndex ? 'bigImg_img isShowImg' : 'bigImg_img'"
        :key="index"
        :src="item"
        ref="bigImageRef"
        alt=""
        draggable="false"
        @mousemove="startMove"
      />
      <div class="Off bigImg_btn" @click="offBigImg">
        <el-icon><CloseBold /></el-icon>
      </div>
      <div class="imgControls bigImg_btn">
        <div class="imgControlsItem">
          <el-icon @click="blowUp('small')"><ZoomOut /></el-icon>
          <el-icon @click="blowUp('big')"><ZoomIn /></el-icon>
          <el-icon @click="rotateFun('left')"><RefreshLeft /></el-icon>
          <el-icon @click="rotateFun('right')"><RefreshRight /></el-icon>
        </div>
      </div>
      <div
        v-if="srcList.length > 1"
        @click="changeImg(bigImgIndex - 1)"
        class="bigImg_btn img_img_left"
        :class="bigImgIndex === 0 ? 'cursorStyleBut' : ''"
      >
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div
        v-if="srcList.length > 1"
        @click="changeImg(bigImgIndex + 1)"
        class="bigImg_btn img_img_right"
        :class="bigImgIndex === srcList.length - 1 ? 'cursorStyleBut' : ''"
      >
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
  </template>
  <template v-else>
    <div v-if="showImgs" class="bigImg">
      <img :src="srcList[3]" id="imgMove" alt="" />
    </div>
  </template>
</template>

<style scoped>
.bigImg {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2024;
  background: rgba(0, 0, 0, 0.5);
  -webkit-user-select: none;
  user-select: none;
}
.bigImg_img {
  position: absolute;
  display: none;
  max-width: 100%;
  max-height: 100%;
  cursor: grab;
}
.isShowImg {
  display: block;
}
.bigImg_btn {
  position: absolute;
  background-color: #cfd3dc;
  opacity: 0.8;
  cursor: pointer;
  color: #fff;
  border-radius: 50%;
}
.imgControls {
  left: 50%;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 23px;
  width: 282px;
  height: 44px;
  border-color: #fff;
  border-radius: 22px;
  transform: translate(-50%);
  font-size: 23px;
}
.imgControlsItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  font-size: 23px;
  color: #fff;
  cursor: pointer;
}
.Off {
  top: 50px;
  right: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 24px;
  border-radius: 50%;
}
.img_img_left {
  top: 50%;
  left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  font-size: 24px;
}
.img_img_right {
  top: 50%;
  right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  font-size: 24px;
}
.cursorStyleBut {
  cursor: not-allowed !important;
}
</style>
